import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { getToken, removeToken, setToken } from '@/utils/auth'
import { resetRouter } from '@/router'
export default {
  // 开启命名空间 - mutation / action - 模块名/函数名 - 防止冲突
  namespaced: true,
  // 定义store数据 - 是响应式 - 数据变化 引发 视图更新
  state: {
    token: getToken() || '',
    userInfo: {}
  },
  // 定义同步修改刚发 - vuex中要求只有一种方式修改数据 就是提交一个 mutation
  mutations: {
    // Token
    setToken(state, payload) {
      // 将后端返回的数据存储到vuex中，vuex是基于内存，读取写入更快，但是页面刷新会清空
      state.token = payload
      // 将后端返回的token存储到，读取速度稍慢但是更加持久化，
      setToken(payload)
    },
    // 用户信息
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // 清楚数据，用来退出登录
    removeUserInfo(start) {
      start.token = ''
      start.userInfo = {}
      // 清楚本地token
      removeToken()
      // 重置路由系统
      resetRouter()
    }
  },
  // 定义异步方法 ajax api 异步处理
  actions: {
    // 接口请求  登录接口
    async fetchLogin(ctx, payload) {
      const token = await login(payload)
      // 提交mutation
      ctx.commit('setToken', token)
    },
    // 获取用户信息的接口请求
    async fetchUserInfo(ctx) {
      // 1. 调用接口 - api
      const res = await getUserInfo()
      // 2. 调用获取用户头像的接口
      const resPhoto = await getUserDetailById(res.userId)
      // 2. 提交mutation
      ctx.commit('setUserInfo', { ...res, ...resPhoto })
      return res.roles
    }
  }
}

// 管理模式：
// dispatch(action) -> 获取异步数据 -> commit(mutation) -> state被修改 -> 影响试图
